<template>
  <div class="box-card">
    <draggable :list="resultData.featConfList"
               :animation="100"
               class="list-group"
               :forceFallback="false"
               chosen-class="chosenClass"
               itemKey="id">
      <template #item="{ element, index }">
        <div class="block">
          <el-card :body-style="{ padding: '0px' }"
                   :style="{backgroundColor :element.runState?colorMode.onLine:colorMode.offLine,opacity: 0.5}"
                   @click="handlerFeatEdit(index,element)"
                   @contextmenu="rightClick($event,element)">
            <template #header>
              <span> 功能: {{ element.featName }}</span>
            </template>
            <template #default>
              <!--              <div> {{ index }}</div>-->
              <div>描述: {{ element.description }}</div>
            </template>
            <template #footer>
              <div> 时间: {{ element.createDate }}</div>
              <div> 运行状态: {{ element.runState ? '在线' : '离线' }}</div>
            </template>
          </el-card>
        </div>
      </template>
    </draggable>
  </div>

  <div>
    <!--   增加弹框,编辑弹框   -->
    <el-dialog v-if="featConfAddState"
               v-model="featConfAddState"
               title="新增"
               width="30%"
               align-center
               destroy-on-close
               @close="handlerCloseDialog"
               draggable>
      <el-form :model="resultData.selectFeat" :label-position="'top'">
        <el-form-item label="输入功能名称:">
          <el-input v-model="resultData.selectFeat.featName" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="功能插件选择:">
          <el-select v-model=resultData.selectValue
                     :model-value="resultData.selectValue.pluginName"
                     clearable filterable
                     placeholder="选择对应的插件"
                     style="width: 100%">
            <el-option v-for="item in options.plugins"
                       :value="item"
                       :label="item.pluginName"/>
          </el-select>
        </el-form-item>
        <el-form-item label="功能描述:">
          <el-input v-model="resultData.selectValue.description" type="textarea" disabled/>
        </el-form-item>
      </el-form>

      <template #footer>
          <span class="dialog-footer">
            <el-button @click="handlerCancel">Cancel</el-button>
            <el-button type="primary" @click="handlerSave">Save</el-button>
          </span>
      </template>
    </el-dialog>

    <el-dialog v-else-if="featEditState"
               v-model="featEditState"
               title="配置"
               width="30%"
               align-center
               destroy-on-close
               @close="handlerCloseDialog"
               draggable>
      <el-form :model="resultData.selectFeat" :label-position="'top'">
        <el-form-item
            v-for="(item,index) in resultData.selectFeat"
            :key="index"
            :label="item.featName"> todo 配置应该是一个列表, 然后根据每个配置类型选择不同的配置表单
          {{ item}} {{ index }}
          <el-input v-if="item.type===0"/>
          <el-button v-if="item.type===1" />
          <el-select v-if="item.type===2" v-model=resultData.selectValue
                     :model-value="resultData.selectValue.pluginName"
                     clearable filterable
                     placeholder="选择对应的插件"
                     style="width: 100%">
            <el-option v-for="item in options.plugins"
                       :value="item"
                       :label="item.pluginName"/>
          </el-select>
        </el-form-item>

        <!--        <el-form-item label="功能名称:">-->
        <!--          <el-input v-model="resultData.selectFeat.featName" autocomplete="off"/>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item label="功能描述:">-->
        <!--          <el-input v-model="resultData.selectFeat.description" type="textarea"-->
        <!--                    :disabled="featEditState"/>-->
        <!--        </el-form-item>-->
      </el-form>

      <template #footer>
          <span class="dialog-footer">
            <el-button @click="handlerCancel">Cancel</el-button>
            <el-button type="primary" @click="handlerSave">Save</el-button>
          </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import {useRoute, useRouter} from "vue-router";

export default {
  name: "Index",
  data() {
    return {}
  }
  ,
  created() {
  }
  ,
  methods: {
    log(evt) {
      console.log(evt);
    },
  }
}
</script>

<script setup lang="ts">
import {ref, defineModel, onMounted, reactive, onUpdated, onBeforeUpdate, shallowRef, nextTick} from 'vue'
import {Delete, Edit, Search, Share, Upload, Check, Timer, Printer} from '@element-plus/icons-vue'

import {menusEvent} from 'vue3-menus'
import draggable from 'vuedraggable'
import axios from "axios";

// 在/离线颜色
let colorMode = ref({
  // 在线亮色
  onLine: '#627373',
  // 离线暗色
  offLine: '#4b4441'
})

// 右键菜单选项
const menus = shallowRef({
  menus: [{
    label: '删除',
    tip: '  ',
    click: () => {
      // console.log("点击" + JSON.stringify(resultData.selectFeat))
      // 从列表中删除选择的数据
      resultData.featConfList = resultData.featConfList
          .filter(item => item.id !== resultData.selectFeat.id)
      resultData.selectFeat = {};
    },
    style: {
      'color': '#ffffff',
      'background-color': '#343131',
      'margin-bottom': '-15px',
      'margin-top': '-15px',
      'border-radius': '5px',
    }
  }]
})

/**
 * 右键点击事件
 * @param event
 * @param element 选择的数据
 */
const rightClick = (event, element) => {
  resultData.selectFeat = element;
  menusEvent(event, menus.value, null);
  event.preventDefault();
}

// 父子组件传递数据
let id = defineModel('id');
// let tableState = defineModel('tableState');
// let selectRowVal = defineModel('selectRowVal');
let featList = defineModel('featList');
// 功能添加状态,true: 添加, false: 展示中
let featAddState = defineModel('featAddState');


let resultData = reactive({
  selectFeat: {},
  selectValue: {},
  featConfList: ref(featList),
})


let featConfAddState = ref(featAddState)

// 功能编辑状态, true: 编辑中, false: 展示中
let featEditState = ref(false)

// 选择编辑的索引
let editIndex: number;

const options = reactive({
  plugins: []
})

onMounted(() => {
  getPlugins();
})

const getPlugins = () => {
  axios.get('/data/plugin')
      .then(res => {
        // console.log("data:" + JSON.stringify(res));
        options.plugins = res.data.list
      })
}

/**
 * 显示/隐藏 编辑,添加表单
 * @param state true: 显示, false: 关闭
 */
const showEdit = (state: boolean, state2: boolean) => {
  featEditState.value = state;
  featConfAddState.value = state2;
}

// 处理编辑框关闭
const handlerCloseDialog = () => {
  resultData.selectFeat = {}
  showEdit(false, false);
}

// 处理功能配置编辑
const handlerFeatEdit = (index, element) => {
  console.log("选择数据: " + JSON.stringify(element))
  console.log("选择数据 index: " + index)
  editIndex = index;
  resultData.selectFeat = JSON.parse(JSON.stringify(element));
  // 显示功能数据
  showEdit(true, false);
}

// 处理取消
const handlerCancel = () => {
  resultData.selectFeat = {};
  showEdit(false, false);
}

/**
 * 新增编辑
 */
const handlerSave = () => {
  // todo 后面表单需要更改, 内容来自后端提供的插件信息, 进行选择配置
  // 如果是修改数据, 则替换, 否则添加
  if (featEditState.value) {
    resultData.featConfList.splice(editIndex, 1, resultData.selectFeat)
  } else if (featConfAddState.value) {
    // 未填写数据不保存
    if (Object.keys(resultData.selectFeat).length !== 0) {
      resultData.selectFeat.type = resultData.selectValue.type;
      resultData.selectFeat.description = resultData.selectValue.description;
      resultData.selectFeat.createDate = new Date().toLocaleString();
      resultData.featConfList.push(resultData.selectFeat)
    }
  }
  resultData.selectFeat = {};
  resultData.selectValue = {};
  showEdit(false, false);
}

</script>

<style scoped>
.box-card .block {
  padding: 30px 0;
  text-align: center;
  display: inline-block;
  width: 25%;
  box-sizing: border-box;
  vertical-align: top;
  cursor: pointer;
  line-height: 80px;

}

.chosenClass {
  opacity: 0.5; /* 不透明度*/
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

</style>